<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form ref="modalForm" :model="dataSource" status-icon>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            v-if="modalType === 'edit'"
            label="请假信息编号"
            :label-width="formLabelWidth"
          >
            <el-input v-model="dataSource.vacateCode" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="绑定请假的员工："
            prop="empCode"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '请绑定需要请假的员工',trigger:'blur,change'}
            ]"
          >
            <el-select v-model="dataSource.empCode" :value="dataSource.empCode" placeholder="请绑定需要请假的员工">
              <el-option
                v-for="item in empArrayList"
                :key="item.empCode"
                :label="item.userInfoName"
                :value="item.empCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            v-if="modalType === 'edit'"
            label="批准人"
            :label-width="formLabelWidth"
          >
            <el-input v-model="dataSource.approverName" :value="dataSource.approverName" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            v-if="modalType === 'edit'"
            label="批准时间"
            :label-width="formLabelWidth"
          >
            <el-input v-model="dataSource.approveTime" :value="dataSource.approveTime" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="请假类型："
            prop="vacateType"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '请假类型不能为空',trigger:'blur,change'}
            ]"
          >
            <el-select v-model="dataSource.vacateType" :value="dataSource.vacateType" placeholder="请选择请假类型">
              <el-option
                v-for="item in vacationTypeList"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col>
          <el-form-item
            label="请假时间范围："
            prop="vacateBeginTime"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '请假时间不能为空',trigger:'blur,change'}
            ]"
          >
            <el-date-picker
              :key="dataSource.id"
              v-model="timeArray.qjsjArray"
              clearable
              type="daterange"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              :default-time="['00:00:00', '23:59:59']"
              @change="setChangeTimeHandle('qjkssj')"
            />
            <span>
              <i style="margin-left: 5px;font-size: 18px;cursor: pointer" class="el-icon-circle-close" @click="setNoneByType('qjkssj')" />
            </span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item
        label="请假原因："
        :label-width="formLabelWidth"
        prop="vacateResion"
        :rules="[
          { required: true, message: '请假原因不能为空',trigger:'blur,change'},
          { min: 3,max:100, message: '长度在3-100个字符之间',trigger:'change'}
        ]"
      >
        <el-input v-model="dataSource.vacateResion" type="textarea" autosize autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm('modalForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addOneVacationInfo, modifyOneVacationInfo } from '@/api/ht/yytgl/qjgl/qjxxcx'
const { Message } = require('element-ui')
const { getAllEmpInfoList } = require('@/api/ht/yytgl/yggl/ygxxgl')
export default {
  name: 'Modal',
  props: {
    vacationInfo: {
      type: Object,
      default: () => {
        return {
          vacateCode: '',
          id: '',
          empCode: '',
          vacateType: '',
          depCode: '',
          vacateBeginTime: '',
          vacateEndTime: '',
          vacateResion: '',
          isApproveFlag: '',
          approverName: '',
          approveTime: ''
        }
      }
    },
    departmentInfoList: {
      type: Array,
      default: () => []
    },
    employeeTypelist: {
      type: Array,
      default: () => []
    },
    vacationTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: '请假信息详情',
      formLabelWidth: '150px', // 表单输入框字段宽度
      dialogFormVisible: false, // 对话框是否显示
      empArrayList: [], // 员工数组列表
      modalType: 'add',
      dataSource: { // 数据源
      },
      timeArray: {
        qjsjArray: [] // 请假时间范围数组
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
    vacationInfo(newdata, prevdata) {
      this.dataSource = newdata
      this.timeArray.qjsjArray = null
      this.$set(this.timeArray, 'qjsjArray', [new Date(newdata.vacateBeginTime), new Date(newdata.vacateEndTime)])
      this.title = '请假信息详情' + this.dataSource.id
    }
  },
  methods: {
    checkModelType(type) {
      this.modalType = type
      // 展示对话框
      this.dialogFormVisible = true
      // 判断是编辑还是新增
      if (type === 'add') {
        // 置空
        this.title = '新增请假信息'
        this.dataSource = {}
        this.timeArray = []
      }

      this.getAllEmpInfoListHandle()
    },
    handleConfirm(formName) {
      const type = this.modalType
      // 判断是编辑还是新增
      if (type === 'add') {
        // 调用新增请求
        this.addVacationInfoHandle(formName)
      } else {
        // 调用修改请求
        this.modifyVacationInfoHandle(formName)
      }
    },
    getAllEmpInfoListHandle() {
      this.getAllEmpInfo()
    },
    addVacationInfoHandle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addDepartmentTypeInfo()
        } else {
          console.log('表单缺少数据或者不符合要求')
          return false
        }
      })
    },
    modifyVacationInfoHandle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.modifyVacationInfo()
        } else {
          console.log('表单缺少数据或者不符合要求')
          return false
        }
      })
    },
    async getAllEmpInfo() {
      const res = await getAllEmpInfoList()
      const data = res.data.main
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        this.empArrayList = data
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async addDepartmentTypeInfo() {
      const res = await addOneVacationInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async modifyVacationInfo() {
      const res = await modifyOneVacationInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    reflushDataHandle() {
      // 调用父组件方法刷新数据
      this.$emit('reflushDataHandle')
    },
    setNoneByType(type) {
      this.timeArray = {}
      if (type === 'qjsj') {
        this.dataSource.vacateBeginTime = ''
        this.dataSource.vacateEndTime = ''
      } else {
        this.dataSource.vacateBeginTime = ''
        this.dataSource.vacateEndTime = ''
      }
    },
    setChangeTimeHandle(str) {
      if (str === 'qjkssj') {
        this.dataSource.vacateBeginTime = this.timeArray.qjsjArray[0]
        this.dataSource.vacateEndTime = this.timeArray.qjsjArray[1]
      } else {
        console.log('参数出错！')
      }
    }

  }
}
</script>

<style scoped>

</style>
